<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap - 表单系列</title>

    <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
    <script src="../js/bootstrap.js"></script>
    <link rel="stylesheet" href="../css/bootstrap.css" />
    <link rel="stylesheet" href="../css/bootstrap-theme.css"/>
</head>
<body>

<!-- 给这个form定义角色 -->
<form class="form-horizontal" role="form">
    <h3>这个是一个有角色的表单</h3>

    <!-- form-group 将这个div下所有的组件自动排列间距 -->
    <div class="form-group">
        <label class="control-label col-xs-3" for="username">用户名</label>
        <div class="col-xs-9">
            <input type="text" class="form-control" id="username" placeholder="请输入登录名">
        </div>
    </div>

    <div class="form-group">
        <label for="inputFile" class="control-label col-xs-3">文件上传</label>
        <input type="file" class="col-xs-9" id="inputFile" placeholder="请上传文件">
    </div>
    <div class="form-group">
        <div class="checkbox col-xs-offset-3 col-xs-9">
            <label>
                <input type="checkbox"> 请打勾
            </label>
            <label>
                <input type="checkbox"> 请打勾
            </label>
        </div>
    </div>

    <div class="form-group">
        <div class="col-sm-offset-3 col-sm-9">
            <button type="submit" class="btn btn-default">登录</button>
            <button type="submit" class="btn btn-default">登录</button>
        </div>
    </div>
</form>
</body>
</html>